<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>

    <style>

        *{
            /*消除浏览器的默认样式*/
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container{
            width: 1000px;

            margin: 20px auto;
        }

        h1{
            text-align: center;
        }


        p{
            text-align: center;
            color: #494646;
            margin: 20px;
        }



        .row {
            display: flex;
            height: 40px;
            justify-content: center;
            align-items: center;
            margin: 10px;
        }

        .row span{
            width: 80px;
        }

        .row input{
            width: 200px;
            height: 30px;
        }

        .row button{
            width: 300px;
            height: 30px;
            color: #ffffff;
            background-color: orange;
            border: none;

            border-radius: 5px;
        }

        .row button:active{
            background-color: #534c4c67;
        }


    </style>
</head>
<body>
    <div class="container">
        <h1 >表白墙</h1>
        <p>输入内容后点击提交，信息会显示到下方表格中</p>

        <div class="row">
            <span>谁：</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" >
        </div>
        <div class="row">
            <span>说：</span>
            <input type="text">
        </div>

        <div class="row">
            <button>提交</button>
        </div>
      
    </div>



    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <script>
        //实现提交操作，点击提交，把用户输入的内容提交到页面上显示

        let containerDiv = document.querySelector('.container');
        let inputs = document.querySelectorAll('input');
        let button = document.querySelector('button');

        button.onclick = function(){
            //获取到三个输入框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;

            let rowDiv = document.createElement('div');
            rowDiv.className = 'row';
            rowDiv.innerHTML = from + '对'+to+'说:'+msg;
            containerDiv.appendChild(rowDiv);


            //清空操作
            for(let input of inputs){
                input.value = '';
            }

            //新增一个给服务器发起一个post请求，把上述数据提交到服务器
            //定义一个js对象，类似于json的键值对 
            // 这里的body只是一个js对象，而不是字符串 
            // 与此同时要注意的是，网络传输只能传字符串，而不能传对象
            let body = {
                "from" :from, 
                "to":to,
                "message" : msg
            };
            //要将json转化成字符串 js内置了json转化的库
           //把js对象转化成字符串
            strBody = JSON.stringify(body);
            console.log("strBody: "+strBody);
            $.ajax({
                type:'post',
                url:'message',
                data:strBody,
                contentType:"application/json; charset=utf8",
                success: function(body){
                    console.log("数据发布成功");
                }
            });
        }


    </script>
</body>
</html>